<template xmlns="http://www.w3.org/1999/html">
  <sea-net-frame ref="tableObject" url="/db/mapping/page" :params="form_data">
    <!--标题栏-->
    <sea-table-title slot="title" title="逆向工程" subtitle="用于生成代码"></sea-table-title>

    <!--输入-->
    <template slot="input">
      <el-form-item label="数据库" prop="schemaName" for="schemaName">
        <el-input size="small" v-model="form_data.schemaName" id="schemaName" placeholder="英数据库"></el-input>
      </el-form-item>
      <el-form-item label="表名" prop="tableName" for="tableName">
        <el-input size="small" v-model="form_data.tableName" id="tableName" placeholder="中/英表名"></el-input>
      </el-form-item>
    </template>

    <!--按钮栏-->
    <template slot="buttons">
      <el-button size="small" icon="fa fa-database" title="载入数据库配置" @click="reloadMapping">
        载入数据库
      </el-button>
    </template>

    <!--表头-->
    <template slot-scope="{list}">
      <!-- 弹窗、抽屉 -->
      <template slot="drawer">
        <sea-dialog ref="dialog">
          <operation ref="panel"></operation>
        </sea-dialog>
      </template>

      <el-table :data="list">
        <el-table-column property="schemaName" label="数据库名" width="180"></el-table-column>
        <sea-col-link property="tableName" label="表名EN" width="280" :click="onAction"></sea-col-link>
        <sea-col-link property="tableComment" label="表名CHN" :click="onAction"></sea-col-link>
      </el-table>
    </template>
  </sea-net-frame>
</template>

<script>
import Operation from "./operation";

export default {
    components: {
        Operation
    }
    , data() {
        return {
            // 操作名称
            operation: undefined
            // 当前操作的行级对象
            , row_data: undefined
            // 操作栏
            , buttons: [
                {evt: 'edit', type: 'btn', label: '控制面板'}
            ]
            // 表单数据
            , form_data: {
                schemaName: 'med'
                , tableName: ''
            }
        }
    }
    , methods: {
        /**
         * 操作栏事件分发
         * @param evt 事件
         * @param row 行级数据
         * @param old 可供回滚的数据
         */
        onAction: function (evt, row, old) {
            if (evt === '$tableName' || evt === '$tableComment') {
                let dialog = {title: `${row.tableComment}${row.tableName}`, fullscreen: true};
                this.$refs.dialog.open(dialog).then(() => {
                    this.$refs.panel.setRowData(row);
                });
            }
        }
        /**
         * 重新载入数据库配置
         */
        , reloadMapping: function () {
            this.$layers.ajax({
                url: 'sys/reverse/mapping/reset',
                method: 'POST',
                params: {schemaName: 'med'}
            }).then(() => {
                this.$refs.tableObject.reload();
            });
        }
    }
}
</script>
